<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>选项卡</title>
    <style>
        div{
            width:600px;
            height:400px;
            background-color:#ccc;
            margin:50px auto;
            border:1px solid black;
        }
        ul.list{
            margin:0px;
            padding:0px;
            width:100%;
            list-style: none;
            background-color:black;
            color:white;
            display: flex;
            height:60px;
            position: relative;
        }
        .list li{
            width:120px;
            line-height:60px;
            text-align:center;
        }
        .list ul{
            margin:0px;
            padding:0px;
            list-style: none;
            position: absolute;
        }
        .list ul li{
            width:120px;
            height:30px;
            line-height:30px;
        }
    </style>
</head>

<body>
<div>
    <ul class="list">
        <li>第一项
             <ul class="one">
                <li>第一项</li>
                <li>第一项</li>
            </ul>
        </li>
        <li>第二项
             <ul class="two">
                <li>第二项</li>
                <li>第二项</li>
                <li>第二项</li>
            </ul>
        </li>
        <li>第三项
            <ul class="three">
                <li>第三项</li>
                <li>第三项</li>
                <li>第三项</li>
                <li>第三项</li>
            </ul>
        </li>
    </ul>
</div>
<script src='./jquery.js'></script>
</body>

</html>
<script>
    $('.list ul').css('display','none');
    var lis = $('.list li');
    lis.mouseover(function(){
        lis.each(function(index){
            $(this).children().css('display','none');
        })
        $(this).not('.list ul li').css('background-color','#ccc').siblings().css('background-color','black');
        $(this).not('.list ul li').children().css('display','block');
        $(this).not('.list ul li').children().css('right',240);
    })
</script>